<template>
	<view>
		<u-navbar title="获客管理" title-color="#1f1f1f" back-icon-color="#1f1f1f" :background="background"></u-navbar>
		<!-- <view class="flex-col page"> -->
		<view class="flex-col group_2">
			<view class=" section_2">
				<view class="flex-row justify-between items-center">
					<view class="flex-col justify-center group_4 flex-1">
						<text class="text_2">用户个数</text>
						<text class="text_4 mt-13">{{recordList.length}}</text>
						
					</view>
					<view @click="openCodeImg" class="flex-row justify-center items-center text-wrapper ">
						<image src="https://terminator.axu9.com/images/er-code-jia.png" style="width: 100%;height: 100%;" mode=""></image>
					</view>
				</view>
				<text class="text_22">用户说明：该用户为扫过二维码的用户</text>
			</view>
			
			<view class="flex-row equal-division mt-17">
				<view @click="openTypePicker" class="flex-row justify-center items-center equal-division-item pd-20">
					<text class="font">{{type != '' ? type : '状态'}}</text>
					<image v-if="!typeShow" class="image_4 ml-2-5"
						src="https://terminator.axu9.com/images/selector-down.png" />
					<image v-if="typeShow" class="image_4 ml-2-5"
						src="https://terminator.axu9.com/images/selector-up.png" />
				</view>
				<view
					class="ml-14 flex-row justify-center items-center section_4 equal-division-item pd-r-4 pd-l-20">
					<!-- <text class="font">{{cardStatus != '' ? cardStatus : '激活状态'}}</text> -->
					<image class="image_search ml-2-5" src="https://terminator.axu9.com/images/search-black.png" />
					<input type="text" placeholder="搜索用户" v-model="nickName" class="search-input flex-row flex-1" />
					<view @click="search" class="input-btn">搜索</view>
				</view>
			</view>
			<view class="flex-col mt-17">
				<!-- <view class="flex-col justify-start"> -->
				<view class="flex-col section_5 relative" v-for="(item,index) in recordList" :key="index">
					<view class="flex-row justify-between items-center group_5">
						<view class="flex-row items-center">
							<text class="font_3">注册时间：{{item.create_time}}</text>
						</view>
						<view class="flex-row items-center" @click="openTypeListPicker(item.id)">
							<text class="type-text1" v-if="item.daili_yixiang_type == 0">未沟通</text>
							<text class="type-text2" v-if="item.daili_yixiang_type == 1">已沟通</text>
							<text class="type-text3" v-if="item.daili_yixiang_type == 2">有意向</text>
							<text class="type-text4" v-if="item.daili_yixiang_type == 3">已成交</text>
							<image v-if="!cardStatusShow" class="image_4 ml-2-5"
								src="https://terminator.axu9.com/images/selector-down.png" />
							<image v-if="cardStatusShow" class="image_4 ml-2-5"
								src="https://terminator.axu9.com/images/selector-up.png" />
						</view>
					</view>
					<image style="width: 100%;height: 2rpx;" src="https://terminator.axu9.com/images/huoke-line-img.png" mode=""></image>
					<view class="flex-row justify-between items-center group_6">
						<view class="flex-row items-center flex-1">
							<image class="shrink-0 image_6"
								src="https://terminator.axu9.com/images/huoke-user-icon.png" />
							<text class="font_6 ml-7">{{item.nickName}}</text>
						</view>
						<view class="flex-row flex-1 items-center justify-between">
							<text class="mobile-text">{{item.mobile}}</text>
							<view @click="callMobile(item.mobile)" class="call-btn">
								拨打电话
							</view>
						</view>
						<!-- <text class="font_7 text_8">{{item.username}}</text> -->
					</view>
					<image v-if="item.status == 0" src="https://terminator.axu9.com/images/weishiyong.png" mode=""
						class="status-img"></image>
					<image v-if="item.status == 1" src="https://terminator.axu9.com/images/yishiyong.png" mode=""
						class="status-img"></image>
				</view>
			</view>

		</view>
		
		
			
			
			
		
		<!--  意向状态选择	 -->
		<u-picker mode="selector" v-model="typeShow" :default-selector="[0]" :range="typeList1"
			range-key="cateName" @confirm="typeConfirm"></u-picker>
		
		<!--列表  意向状态选择	 -->
		<u-picker mode="selector" v-model="typeListShow" :default-selector="[0]" :range="typeList"
			range-key="cateName" @confirm="typeListConfirm"></u-picker>
	</view>
</template>

<script>
	import commonData from '@/common/js/data.js';
	import {
		activationcodeList,
		getCodePrice,
		buyActivationcode,
		getPoster,
		userManag,
		fenxiaoKehu
	} from "@/api/user.js"
	export default {
		data() {
			return {
				integral: 0, //剩余积分
				background: {
					backgroundColor: 'rgba(0,0,0,0)',
				},
				cardTypeShow: false, //卡类型选择器
				cardTypePopShow: false, //弹窗--卡类型选择器
				cardStatusShow: false, //卡激活状态选择器
				cardTypeList: [{
						cateName: '月卡',
						id: 1
					},
					{
						cateName: '季卡',
						id: 2
					},
					{
						cateName: '年卡',
						id: 3
					}
				],
				cardStatusList: [{
						cateName: '已激活',
						id: 1
					},
					{
						cateName: '未激活',
						id: 2
					}
				],
				typeList: [{
						cateName: '未沟通',
						id: 0
					},
					{
						cateName: '已沟通',
						id: 1
					},
					{
						cateName: '有意向',
						id: 2
					},
					{
						cateName: '已成交',
						id: 3
					}
				],
				typeList1: [
					{
						cateName: '全部',
						id: ""
					},
					{
						cateName: '未沟通',
						id: 0
					},
					{
						cateName: '已沟通',
						id: 1
					},
					{
						cateName: '有意向',
						id: 2
					},
					{
						cateName: '已成交',
						id: 3
					}
				],
				typeShow: false,//沟通意向选择器
				typeListShow: false,//列表--沟通意向选择器
				type: '',//沟通意向
				listType: '',
				cardType: '', //卡类型
				cardTypePop: '', //弹窗--卡类型
				cardStatus: '', //激活状态
				recordList: [
					// {
					// 	cardno: '86876786666',
					// 	time: '2023-08-18 09:43:36',
					// 	type: 1, //1月卡 2季卡 3年卡
					// 	username: '小张',
					// 	status: 0, //0未使用 1已使用
					// },
					// {
					// 	cardno: '86876786666',
					// 	time: '2023-08-18 09:43:36',
					// 	type: 2, //1月卡 2季卡 3年卡
					// 	username: '小张',
					// 	status: 1, //0未使用 1已使用
					// }
				],
				popupCard: false, //生成卡密弹窗
				xhNum: 0, //消耗积分
				integral: 0, //剩余积分
				cardTypePop: '', //弹窗--卡类型
				cardNum: '', //数量
				isLoading: false, //防止重复点击
				imgUrl: '', //邀请码
				nickName: '',
				listUid: '',//列表客户id
				commonData: {}
			}
		},
		onLoad() {
			// this.getList();
			this.getImg();
			this.getNewList();
			this.commonData = commonData;
		},
		// onShareAppMessage: function (res) {},//分享好友
		// onShareTimeline(){},//分享朋友圈
		methods: {
			callMobile(mobile){
				uni.makePhoneCall({
					phoneNumber: mobile
				});
			},
			search(){
				this.getNewList();
			},
			// 修改意向
			updateType(type){
				fenxiaoKehu({
					uid: this.listUid,
					daili_yixiang_type: type == '未沟通' ? 0 : type == '已沟通' ? 1 : type == '有意向' ? 2 : type == '已成交' ? 3 : ''
				}).then(res=> {
					if(res.errno == 0){
						uni.showToast({
							title: '修改成功',
							icon: 'none',
							duration: 1000
						})
						this.getNewList();
					}else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			// 预览海报
			openCodeImg(){
				uni.previewImage({
					urls: [this.imgUrl],
					current:0
				})
			},
			// 打开沟通意向选择
			openTypePicker() {
				this.typeShow = true
			},
			// 打开沟通意向选择
			openTypeListPicker(id) {
				console.log(id, 'idddddd')
				this.listUid = id;
				this.typeListShow = true
				
			},
			// 沟通意向--确定
			typeConfirm(e){
				let index = e[0];
				this.type = this.typeList1[index].cateName;
				this.getNewList();
			},
			// 沟通意向--确定
			typeListConfirm(e){
				let index = e[0];
				this.updateType(this.typeList[index].cateName);
			},
			getImg() {
				getPoster({
					uid: uni.getStorageSync("userId")
				}).then(res => {
					if (res.errno == 0) {
						console.log(res, 'kkkk')
						this.imgUrl = res.data;
					}

				})
			},
			// 预览图片
			previewImg() {
				uni.previewImage({
					current: 0,
					urls: [this.imgUrl],
					longPressActions: true
				})
			},
			// 复制
			copyText(text) {
				uni.setClipboardData({
					data: text,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'success',
							duration: 2000
						});
					},
					fail: () => {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						});
					}
				});
			},
			// 代理商选择卡类型查询价格
			getPrice() {
				uni.showLoading({
					title: '计算中'
				})
				getCodePrice({
					uid: uni.getStorageSync("userId"),
					type: this.cardTypePop == '月卡' ? 1 : this.cardTypePop == '季卡' ? 2 : this.cardTypePop == '年卡' ?
						3 : '',
					num: this.cardNum
				}).then(res => {
					console.log(res, '代理商选择卡类型查询价格')
					uni.hideLoading();
					if (res.errno == 0) {
						console.log(res.data)
						this.xhNum = res.data.price
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {
					uni.hideLoading();
				})
			},
			cardnumInput(e) {
				console.log(e.detail.value, this.cardTypePop, ';;;;')
				if (this.cardTypePop != '') {
					this.getPrice();
				}
			},
			// 获取列表-新
			getNewList() {
				userManag({
					uid: uni.getStorageSync("userId"),
					nickName: this.nickName,
					daili_yixiang_type: this.type == '未沟通' ? "0" : this.type == '已沟通' ? 1 :this.type == '有意向' ? 2 :this.type == '已成交' ? 3 : ''
				}).then(res => {
					this.recordList = res.data;
				})
			},
			// 获取激活码记录
			getList() {
				activationcodeList({
					uid: uni.getStorageSync("userId"), //用户id
					type: this.cardType == '月卡' ? 1 : this.cardType == '季卡' ? 2 : this.cardType == '年卡' ? 3 :
					'', //1月2季3年
					is_use: this.cardStatus == '未激活' ? 0 : this.cardStatus == '已激活' ? 1 : '', //0未使用1已使用
				}).then(res => {
					console.log(res, '获取激活码记录')
					if (res.errno == 0) {
						this.recordList = res.data.list
						this.integral = res.data.user ? res.data.user.integral : 0;
					}
				}).catch(err => {

				})
			},
			// 弹窗 打开卡类型选择器
			openCardType() {
				this.cardTypeShow = true;
			},
			// 弹窗 打开卡类型选择器
			openCardTypePop() {
				this.cardTypePopShow = true;
			},
			// 打开卡状态选择器
			openCardStatus() {
				this.cardStatusShow = true;
			},
			// // 卡类型--确定
			// typeConfirm(e) {
			// 	console.log(e, 'typeConfirm')
			// 	let index = e[0];
			// 	this.cardType = this.cardTypeList[index].cateName;
			// 	this.getList();

			// },
			//弹窗 卡类型--确定
			typePopConfirm(e) {
				console.log(e, 'typeConfirm')
				let index = e[0];
				this.cardTypePop = this.cardTypeList[index].cateName;
				console.log(this.cardNum, this.cardTypePop, ';;;;111')
				if (this.cardNum != '') {
					this.getPrice();
				}

			},
			// 卡状态--确定
			statusConfirm(e) {
				console.log(e, 'typeConfirm')
				let index = e[0];
				this.cardStatus = this.cardStatusList[index].cateName;
				this.getList();
			},
			
			// 打开生成卡密弹窗
			createCard() {
				this.popupCard = true;
			},
			// 卡密弹窗--确定
			create() {
				if (this.cardNum == '') {
					uni.showToast({
						title: '购买数量不能为空',
						icon: 'none'
					})
					return
				}
				if (this.cardTypePop == '') {
					uni.showToast({
						title: '卡类型不能为空',
						icon: 'none'
					})
					return
				}
				let jifen = Number(this.integral)
				if (this.xhNum > jifen) {
					uni.showToast({
						title: '积分不足',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title: '加载中'
				})
				this.isLoading = true;
				console.log('购买')
				buyActivationcode({
					uid: uni.getStorageSync("userId"),
					type: this.cardTypePop == '月卡' ? 1 : this.cardTypePop == '季卡' ? 2 : this.cardTypePop == '年卡' ?
						3 : '',
					num: this.cardNum
				}).then(res => {
					uni.hideLoading();
					this.isLoading = false;
					if (res.errno == 0) {
						this.popupCard = false;
						this.getList();
						this.xhNum = 0;
						this.cardNum = '';
						this.cardTypePop = '';
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {
					this.isLoading = false;
					uni.hideLoading();
				})



			},
			// 卡密弹窗--取消
			cancelPop() {
				this.popupCard = false;
				this.xhNum = 0;
				this.cardNum = '';
				this.cardTypePop = '';
			}
		}
	}
</script>
<style>
	@import url(../../static/css/common.css);
	page {
		background-size: 100% 433rpx;
		/* background-image: linear-gradient(181deg, #d6f4ed 0%, #f5f5f5 100%); */
		background-image: linear-gradient(181deg, #d6f4ed 0%, #ebfaf6 100%);
		background-repeat: no-repeat;
		background-color: #f5f5f5;
	}
	
</style>
<style lang="scss" scoped>
	.mt-13 {
		margin-top: 26rpx;
	}

	.mt-17 {
		margin-top: 34rpx;
	}

	.ml-2-5 {
		margin-left: 5rpx;
	}

	.ml-7 {
		margin-left: 14rpx;
	}

	.mt-14-5 {
		margin-top: 29rpx;
	}

	
	.page {
		/* padding-bottom: 686rpx;
	  background-color: #f5f5f5; */
		height: 100%;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.section {
		padding: 28rpx 28rpx 186rpx;
		background-image: linear-gradient(181deg, #d6f4ed 0%, #ebfaf6 100%);
	}

	.image {
		margin-left: 36rpx;
		width: 655rpx;
		height: 24rpx;
	}

	.group {
		padding-bottom: 24rpx;
	}

	.image_2 {
		width: 16rpx;
		height: 28rpx;
	}

	.pos {
		position: absolute;
		left: 0;
		top: 3rpx;
	}

	.text {
		color: #000000;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 34rpx;
	}

	.section_3 {
		margin-right: 3rpx;
		background-color: #00bf90;
		border-radius: 0rpx 20rpx 0rpx 0rpx;
		width: 349rpx;
		height: 81rpx;
	}

	.group_2 {
		/* margin-top: -267rpx; */
		padding: 0 28rpx;
	}

	.section_2 {
		/* margin-right: 5rpx;
	  padding: 91rpx 40rpx 35rpx 45rpx;
	  filter: drop-shadow(0rpx -4rpx 7rpx #1f242c12);
	  border-radius: 20rpx; */
		padding: 100rpx 100rpx 50rpx 46rpx;
		width: 690rpx;
		/* height: 298rpx; */
		border-radius: 20rpx;
		background: linear-gradient(-88deg, #33c5d8, #00c959);
		/* box-shadow: 0 -4rpx 7rpx 0 #1f242c12; */
		background-image: url('https://terminator.axu9.com/images/yhgl-top-bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.group_4 {
		margin-top: 17rpx;
		/* padding-bottom: 73rpx; */
	}

	.text_2 {
		color: #b9dcff;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 32rpx;
	}
	.text_22 {
		color: #b9dcff;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		margin-top: 20rpx;
	}

	.text_4 {
		color: #ffffff;
		font-size: 80rpx;
		font-family: Adobe Heiti Std;
		/* line-height: 62rpx; */
		width: 90%;
		word-break: break-all;
	}

	.group_3 {
		width: 212rpx;
	}

	.image_3 {
		width: 172rpx;
		height: 172rpx;
	}

	.text-wrapper {
		width: 100rpx;
		height: 100rpx;
		border-radius: 14rpx;
		background: linear-gradient(90deg, #c5fff2, #ffffff);

	}

	.pos_2 {
		position: absolute;
		left: 0;
		right: 0;
		top: 9rpx;
	}

	.text_3 {
		color: #07da76;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 28rpx;
	}

	.equal-division {
		margin-right: 8rpx;
	}

	.font {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 26rpx;
		font-weight: 500;
		color: #98a0a9;
	}

	.section_4 {
		flex: 1 1 330rpx;
	}

	.equal-division-item {
		padding: 20rpx 0 16rpx;
		background-color: #ffffff;
		border-radius: 8rpx;
		height: 64rpx;
	}

	.pd-20 {
		padding: 0 20rpx;
	}

	.pd-l-20 {
		padding-left: 20rpx;
	}

	.pd-r-4 {
		padding-right: 4rpx;
	}

	.image_4 {
		width: 14rpx;
		height: 9rpx;
	}

	.image_search {
		width: 26rpx;
		height: 26rpx;
	}

	.search-input {
		font-weight: 400;
		font-size: 24rpx;
		text-align: left;
		color: #0F4135;
		padding-left: 20rpx;
	}

	.input-btn {
		width: 116rpx;
		height: 51rpx;
		line-height: 51rpx;
		border-radius: 4rpx;
		background: linear-gradient(90deg, #00ccbb, #00e586);
		font-weight: 400;
		font-size: 24rpx;
		text-align: center;
		color: #FFFFFF;
	}

	.section_5 {
		margin-right: 5rpx;
		padding-left: 24rpx;
		padding-right: 36rpx;
		border-radius: 12rpx;
		background-color: #fff;
		/* background-image: url('https://ide.code.fun/api/image?token=66b61b780412d90011fae046&name=9df257d32cea88e55ca4abac2535b84f.png');
		background-size: 100% 100%;
		background-repeat: no-repeat; */
		margin-bottom: 20rpx;
	}

	.group_5 {
		padding: 30rpx 0 21rpx;
		/* border-bottom: dashed 1rpx #536074; */
	}
	.type-text1 {
		font-weight: 400;
		font-size: 22rpx;
		text-align: center;
		color: #00BF90;
	}
	.type-text2 {
		font-weight: 400;
		font-size: 22rpx;
		text-align: center;
		color: #FF9908;
	}
	.type-text3 {
		font-weight: 400;
		font-size: 22rpx;
		text-align: center;
		color: #00BF90;
	}
	.type-text4 {
		font-weight: 400;
		font-size: 22rpx;
		text-align: center;
		color: #98A0A9;
	}

	.font_3 {
		font-size: 22rpx;
		font-family: Adobe Heiti Std;
		line-height: 23rpx;
		color: #666666;
	}

	.image_5 {
		margin-left: 19rpx;
		width: 20rpx;
		height: 21rpx;
	}

	.font_4 {
		font-size: 20rpx;
		font-family: PingFang SC;
		line-height: 19rpx;
		color: #00bf90;
	}

	.text_6 {
		margin-left: 5rpx;
	}

	.font_5 {
		font-size: 20rpx;
		font-family: Adobe Heiti Std;
		line-height: 16rpx;
		color: #666666;
	}

	.text_7 {
		margin-right: 59rpx;
	}

	.group_6 {
		padding: 22rpx 4rpx 28rpx;
	}

	.image_6 {
		width: 41rpx;
		height: 39rpx;
	}

	.font_6 {
		font-size: 30rpx;
		font-family: Adobe Heiti Std;
		font-weight: 500;
		color: #222222;
		width: 80%;
		word-break: break-all;
	}
	.mobile-text {
		font-weight: 500;
		font-size: 30rpx;
		color: #2D2D2D;
	}

	.call-btn {
		margin-left: 7rpx;
		border-radius: 18rpx;
		width: 111rpx;
		height: 36rpx;
		line-height: 36rpx;
		border: 1rpx solid #01af84;
		font-size: 20rpx;
		font-family: PingFang SC;
		color: #00bf90;
		text-align: center;
	}

	.font_7 {
		font-size: 24rpx;
		font-family: Adobe Heiti Std;
		line-height: 23rpx;
		color: #00bf90;
	}

	.text_8 {
		margin-right: 58rpx;
	}

	.status-img {
		width: 86rpx;
		height: 84rpx;
		position: absolute;
		right: 0;
		top: 0;
	}

	.font_2 {
		font-size: 20rpx;
		font-family: PingFang SC;
		color: #ffffff;
	}

	.text_5 {
		line-height: 51rpx;
	}

	.pos_3 {
		position: absolute;
		right: 0;
		top: 4rpx;
		transform: rotate(46deg);
	}

	.section_6 {
		margin-right: 5rpx;
		padding-left: 35rpx;
		padding-right: 15rpx;
		border-radius: 12rpx;
		background-image: url('https://ide.code.fun/api/image?token=66b61b780412d90011fae046&name=aa9bdcffdf590253e2343963645b5ebb.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.text_9 {
		line-height: 53rpx;
	}

	.pos_4 {
		position: absolute;
		right: 0;
		top: 0;
		transform: rotate(46deg);
	}

	/* 弹窗 */
	.popup {
		padding: 50rpx 30rpx 77rpx;
		background-image: linear-gradient(0deg, $white-color 0%, $popup-top-bg-white 100%);
		border-radius: 20rpx;
		width: 552rpx;
	}

	.pop-title {
		margin-left: 7rpx;
		color: #333333;
		font-size: 36rpx;
		font-family: Adobe Heiti Std;
		line-height: 34rpx;
		margin-bottom: 20rpx;
	}

	.pop-card-type {
		padding: 32rpx 54rpx;
		background-color: #ffffff;
		border-radius: 8rpx;
		height: 92rpx;
	}

	.pop-input {
		width: 80%;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #98a0a9;
		text-align: center;
	}

	.pop-placeholder {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #98a0a9;
	}

	.pop-text {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #98a0a9;
		margin-right: 6rpx;
	}

	.pop-card-num {
		padding: 32rpx 0;
		background-color: #ffffff;
		border-radius: 8rpx;
		width: 262rpx;
		height: 92rpx;
	}

	.pop-down-icon {
		width: 14rpx;
		height: 9rpx;
	}

	.pop-xiaohao {
		margin-left: 20rpx;
		margin-top: 37rpx;
		color: #666666;
		font-size: 30rpx;
		font-family: Adobe Heiti Std;
		line-height: 29rpx;
	}

	.pop-bottom {
		margin-top: 48rpx;

	}

	.pop-bt-btn1 {
		background-image: linear-gradient(90deg, $button-color-bg-lin-left 0%, $button-color-bg-lin-right 100%);
		border-radius: 34rpx;
		width: 227rpx;
		height: 68rpx;
		font-size: 30rpx;
		font-family: Adobe Heiti Std;
		line-height: 68rpx;
		color: #ffffff;
		text-align: center;
	}

	.pop-bt-btn2 {
		// background-color: #ffffff;
		border-radius: 34rpx;
		width: 227rpx;
		height: 68rpx;
		font-size: 30rpx;
		font-family: Adobe Heiti Std;
		line-height: 68rpx;
		// color: #9da4b1;
		color: $theme-color;
		border: 1rpx solid $theme-color;
		text-align: center;
	}
</style>